<template>
  <div class="w-full border-1 border-gray-200 mb-4">
    <div class="h-11 leading-11 px-4 border-gray-200" :class="state.isExpand ? 'border-b-1' : ''" @click="state.isExpand = !state.isExpand">
      <a-checkbox v-if="closable" v-model:checked="state.checked" @change="handleCheckChange" @click.stop="null" />
      <span class="font-bold ml-4 mr-2">{{ index }}</span>
      <DownOutlined v-show="state.isExpand" class="text-2.5 ml-2 !text-gray-400" />
      <UpOutlined v-show="!state.isExpand" class="text-2.5 ml-2 !text-gray-400" />
      <CloseOutlined v-if="closable" class="text-2.5 float-right my-4 !align-middle cursor-pointer" @click.stop="handleClose(index)" />
    </div>
    <transition-group name="fade">
      <div v-show="state.isExpand" :key="index" class="px-8 py-4">
        <slot></slot>
      </div>
    </transition-group>
  </div>
</template>

<script lang="ts" setup>
import { reactive, watch } from 'vue';

const props = defineProps({
  // 序号
  index: {
    type: Number,
    default: 0
  },
  closable: {
    type: Boolean,
    default: true
  },
  checked: {
    type: Boolean,
    default: false
  }
});
const emit = defineEmits(['close', 'update:checked']);
watch(
  () => props.checked,
  (newVal) => {
    state.checked = newVal;
  }
);
const state = reactive({
  isExpand: true,
  checked: props.checked
});
// 处理关闭
function handleClose(index) {
  emit('close', index);
}
// 多选框改变
function handleCheckChange() {
  emit('update:checked', state.checked);
}
</script>

<style lang="less" scoped></style>
